<script setup>

import {ArrowBack, ArrowForward} from "@vicons/ionicons5";
import Register from "@/components/Register.vue";
import Login from "@/components/Login.vue";
import {onMounted} from "vue";
import {requestGetUserInfo} from "@/api/user/UserApi";
import {useRoute, useRouter} from "vue-router";

onMounted(() => {
  loadUserInfo();
})

const props = defineProps(['page'])

const loginSuccessHandle = () => {
  window.$message.success("登录成功！")
  loadUserInfo();
}

function loadUserInfo() {
  let item = window.localStorage.getItem("token");
  // console.log(item)
  if (!item) {
    //未登录
    loginInfo.loginFlag = false
  } else {
    //获取信息
    requestGetUserInfo().then(userRes => {
      // console.log(userRes)
      window.localStorage.setItem("info", JSON.stringify(userRes));
      loginInfo.loginFlag = true
      loginInfo.userInfo = userRes.data
    }).catch(reason => {
      // console.log(reason)
      window.$message.error("登录失效。请重新登录！")
    })
  }
}

/**
 * 登录信息
 * @type {UnwrapNestedRefs<{}>}
 */
const loginInfo = reactive({
  loginFlag: undefined,
  userInfo: {}
})

const loginRef = ref(null)
const registerRef = ref(null)

/**
 * 注销登录
 */
const loginOut = () => {
  window.$dialog.warning({
    title: '警告',
    content: '您确定要退出登录吗？',
    positiveText: '确定',
    negativeText: '不确定',
    onPositiveClick: () => {
      window.localStorage.clear();
      loginInfo.loginFlag = false
      window.$message.success('注销成功')
    },
    onNegativeClick: () => {
    }
  })

}

const router = useRouter()
/**
 * 返回首页
 */
const goIndex = () => {
  router.push('/')
}

</script>

<template>
  <header class="header_container" :style="{'backgroundColor':props.page?'white':''}">
    <div class="header">
      <!--    左边 -->
      <div class="header_left">
        <h1 class="icon" @click="goIndex">Tencent123腾23212312讯</h1>
      </div>
      <!--    右边-->
      <div class="header_right">
        <!--        <div>简介</div>-->
        <!--        <div>业务</div>-->
        <!--        <div>员工</div>-->
        <!--        <div>简介</div>-->
        <!--        <div>简介</div>-->
        <!--        <div>简介</div>-->
      </div>
      <div class="login_container" :style="{'color':props.page?'black':''}">
        <Register ref="registerRef"></Register>
        <Login ref="loginRef" @login-success="loginSuccessHandle"></Login>
        <div v-show="loginInfo.loginFlag">
          <n-avatar
              round
              size="small"
              src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
          />
        </div>
        <div v-show="!loginInfo.loginFlag" style="cursor: pointer" class="login"
             @click="loginRef.open()">登录
        </div>
        <div v-show="!loginInfo.loginFlag" style="cursor: pointer" class="register"
             @click="registerRef.open()">注册
        </div>
        <div v-show="loginInfo.loginFlag" class="loginSchoolName">
          {{ loginInfo.userInfo.schoolName }}
        </div>
        <div v-show="loginInfo.loginFlag" class="loginUserName">
          {{ loginInfo.userInfo.name }}
        </div>
        <div v-show="loginInfo.loginFlag" style="cursor: pointer" class="loginOut"
             @click="loginOut">
          <n-gradient-text type="error">
            退出登录
          </n-gradient-text>
        </div>
      </div>
    </div>
  </header>
  <div class="line" v-if="props.page === true"></div>
</template>

<style scoped lang="less">
h1 {
  margin: 0;
}

.header_container {
  //height: 656px;
  width: auto;
  background-size: cover;
  position: relative;
  z-index: 2;
}

.header {
  height: 72px;
  //background: #2b2e2e;
  max-width: 1280px;
  display: flex;
  //justify-content: space-between;
  margin: 0 auto;
  justify-content: space-between;

  .icon {
    cursor: pointer;
    font-variant: normal;
    display: block;
    height: 72px;
    width: 168px;
    text-indent: -9999px;
    overflow: hidden;
    background: url("@/assets/logo-pink.png") no-repeat 0 0;

    background-size: 100%;
  }

  .header_right {
    position: absolute;

    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    max-width: 800px;

    & > div {
      flex: 1;
      color: white;
      height: 72px;
      line-height: 72px;
      text-align: center;
      width: 104px;
    }


  }

  .login_container {
    display: flex;
    color: white;
    //position: absolute;
    align-items: center;
    //right: 0;
    height: 72px;
    font-weight: bold;

    & > div {
      margin: 0 8px;
    }

    .login {

    }

    .register {

    }
  }


}

.line {
  height: 1px;
  width: 100%;
  background: #ccc;
}
</style>